<template>
  <div class="register">
    <div class="main"> 
        <div>
            <div class="login_font">
                <span>如已注册,点此</span>
                <router-link to="/login">登录</router-link>
            </div>
            <div class="table">
                <div class="_icon">
                    <span>新用户注册</span>
                </div>
                <div class="content">
                    <div class="inputPhone">
                        <input type="text" placeholder="用户名" v-model="uname" @blur="checkUname()">
                    </div>
                    <div class="font1">
                        <div :style="unameState">
                            <img src="/img/login/X-icon.png">请输入4~12位字符
                        </div>
                        <div :style="unameState2" style="color:green">
                            <img src="/img/login/√-icon.png">格式正确
                        </div>
                    </div>


                    <div class="inputPhone">
                        <input type="text" placeholder="手机" v-model="phone" @blur="checkPhone">
                    </div>
                    <div class="font1">
                        <span>{{phone_reg}}</span>
                        <div :style="phoneState">
                            <img src="/img/login/X-icon.png">请输入正确手机号
                        </div>
                        <div :style="phoneState2" style="color:green">
                            <img src="/img/login/√-icon.png">格式正确
                        </div>
                    </div>


                    <div class="dxyzm">
                        <input type="text" placeholder="短信验证码">
                        <router-link to="#">获取验证码</router-link>
                    </div>
                    <div class="font1"></div>


                    <div class="inputPhone">
                        <input type="text" placeholder="密码" v-model="upwd" @blur="checkUpwd">
                    </div>
                    <div class="font1">
                        <div :style="upwdState">
                            <img src="/img/login/X-icon.png">请输入6~12位字符
                        </div>
                        <div :style="upwdState2" style="color:green">
                            <img src="/img/login/√-icon.png">格式正确
                        </div>
                    </div>

                    <div class="inputupwd">
                        <input type="text" placeholder="确认密码" v-model="upwd2" @blur="checkUpwd2">
                    </div>
                    <div class="font1">
                        <div :style="regupwdState">
                            <img src="/img/login/X-icon.png">两次密码不一致
                        </div>
                        <div :style="regupwdState2" style="color:green">
                            <img src="/img/login/√-icon.png">密码正确
                        </div>
                    </div>

                    <div class="yanzhengma">
                        <input type="text" placeholder="验证码">
                        <img src="/img/register/yan001.png">
                    </div>                    
                    <div class="font2"></div>
                    <div class="ch_box">
                        <input type="checkbox" checked="checked">
                        <span> 我已看过并接受</span>
                        《<router-link to="#">用户协议</router-link>》
                    </div>
                    <div class="font3"></div>
                    <div class="btn">
                       <input type="submit" value="注 册" class="submit_btn" @focus="reg">
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>

export default {

    data(){
        return {
            phone:"",
            uname:"",
            upwd:"",
            upwd2:"",
            unameState:"display:none",
            upwdState:"display:none",
            upwdState2:"display:none",
            unameState2:"display:none",
            phoneState:"display:none",
            phoneState2:"display:none",
            regupwdState:"display:none",
            regupwdState2:"display:none",
            phone_reg:"",
            a:'',
            b:'',
            c:'',
        }
    },
    methods: {
        //验证用户名
        checkUname(){
            let reg = /^\w{4,12}$/;
            if(reg.test(this.uname)){ //true 验证成功
                this.unameState = "display:none";
                this.unameState2 = "display:block";
                this.axios.get(`/ub/regUname?uname=${this.uname}`).then(result=>{
                    if(result.data.code==201){
                        alert("用户名已被注册")
                        return false;
                    }else{
                        this.unameState = "display:none";
                        this.unameState2 = "display:block";
                        return this.a=1; 
                    }
                })
            }
        },
        //验证密码
        checkUpwd(){
            let reg = /^\w{6,10}$/;
            if(reg.test(this.upwd)){  //true 验证成功
                this.upwdState = "display:none";
                this.upwdState2 = "display:block";
                return this.b=1;
            }else{ // false 不符合格式要求
                this.upwdState = "display:block";
                this.upwdState2 = "display:none";
                return false;
            }
        },
        checkUpwd2(){
            if (this.upwd == this.upwd2 && !this.upwd ==""){
                this.regupwdState = "display:none";
                this.regupwdState2 = "display:block";
                return true;
            }else{
                this.regupwdState = "display:block";
                this.regupwdState2 = "display:none";
                return false;
            }
        },
        //验证手机号
        checkPhone(){
            let reg = /^1[3-9]\d{9}$/;
            if(reg.test(this.phone)){
                    this.phoneState = "display:none";
                    this.phoneState2 = "display:block";                              
                this.axios.get(`/ub/regPhone?phone=${this.phone}`).then(result=>{
                    if(result.data.code==201){
                        alert("手机号已被注册")
                        return false;
                    }else{
                        this.phoneState = "display:none";
                        this.phoneState2 = "display:block";                              
                        return this.c=1;                        
                    }
                }) 

            }
        },
        //验证表单,点击按钮后触发
        reg(){
            // if(this.checkUname() && this.checkPhone() && this.checkUpwd()){
            if(this.a==1 && this.b==1 && this.c==1){
                //发送注册请求,实现注册业务
                this.axios.post("/ub/register",`phone=${this.phone}&uname=${this.uname}&upwd=${this.upwd}`).then(result=>{
                    console.log(result)
                    if(result.data.code==200){
                        alert("注册成功!")
                        this.$router.push("/login")
                    }else{
                        alert("注册失败:信息有误")
                    }
                })
            }else{
                alert('信息有误,请检查')
            }
        },
    },
}
</script>

<style scoped>
.main{
    width: 980px;
    margin: 40px auto 0 auto;
}
.main .login_font{
    text-align: right;
    margin-bottom: 70px;
    font-size: 14px;
}
.main .login_font a{
    background-color: #c3625d;
    color: #fff;
    padding: 3px 8px ;
    margin-left: 5px;
    border-radius: 2px;
    font-size: 14px;
}
.main .login_font a:hover{
    color: #333;
}
.main .table{
    width: 980px;
    height: 650px;
    border: 1px solid #eee;
    border-radius:8px;
    box-shadow: 1px 1px 5px rgb(98 105 109 / 50%);
}
.table ._icon{
    font-size: 18px;
    color: #c3625d;
    height: 56px;
    line-height: 60px;
    border-bottom: 1px solid #c3625d;
}
.table ._icon img{
    margin-top: -8px;
}
.table .content{
    height: 650px;
    width: 400px;
    margin: 50px auto;
}
.table .content .font1,.font2,.font3{
    height: 24px;
    text-align: left;
    font-size: 12px;
    line-height: 24px;
    color: red;
}
.table .content .inputPhone input,.table .content .inputupwd input, .yanzhengma input{
    width: 370px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    color:#ccc;
    border: 1px solid #ccc;
    padding: 0 15px;
}
.table .content .ch_box a{
    font-size: 14px;
    color: #22f;
}
.yanzhengma input{
    width: 100px;
    margin-left: -137px;
}
.table .content .ch_box span{
    font-size: 14px;
    margin-left: 8px;
}
.table .ch_box{
    text-align: left;
}
.table .content .ch_box input{
    display: block;
    float: left;
    margin-top: 2px;
}
.table .content .submit_btn{
    width: 400px;
    height: 48px;
    background-color: #e73736;
    outline: none;
    border: 0;
    font-size: 18px;
    color: #fff;
}
.dxyzm{
    display: flex;
}
.dxyzm input{
    width: 280px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    color:#ccc;
    border: 1px solid #ccc;
    padding: 0 15px;
}
.dxyzm a{
    display: block;
    width: 120px;
    height: 40px;
    line-height: 40px;
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    color: #333;
    font-size: 14px;
    border-left: 0;
}
</style>